{% extends 'ipad/base.html' %}

{% load staticfiles %}

{% block content %}
<div class="order-form-controls row">
  <div class="col-sm-6">
    <select id="id-customer" name="customer">
    {% for customer in customers %}
      <option value="{{ customer.pk }}" data-outstanding="{{ customer.outstanding_total }}">{{ customer }}</option>
    {% endfor %}
    </select>
  </div>
  
  <div class="col-sm-6">
    <p class="outstanding-wrapper">ยอดค้างชำระ: <span class="outstanding"></span></p>
  </div>
</div>

<table class="order-form table table-bordered">
  <thead>
    <tr>
      <th class="quantity">จำนวน</th>
      <th class="name">รายการ</th>
      <th class="unit">หน่วย</th>
      <th class="price">ราคา</th>
      <th class="total">รวม</th>
    </tr>
  </thead>

  <tfoot>
    <tr><td colspan="5" style="padding:10px 0 0;"><button id="add-product-btn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button></td></tr>

    <tr>
      <td colspan="3">
        <label>หมายเหตุ</label>
        <textarea id="id-note" class="form-control"></textarea>
      </td>
      <td>รวม<br/><br/>ชิ้น</td>
      <td class="summary"></td>
    </tr>
  </tfoot>
  
  <tbody>
    <tr><td colspan="5" style="padding:0;"></td></tr>
  </tbody>
</table>

<div class="submit-wrapper">
  <button id="order-submit-btn" type="submit" class="btn btn-default">ชำระเงิน</button>
  <img class="hide" src="{% static 'ipad/images/loading.gif' %}" alt="loading">
</div>

{% include 'ipad/include/order-dialog.html' %}
{% endblock content %}

{% block script %}
  <script src="{% static 'ipad/js/order.js' %}"></script>
  <script src="{% static 'ipad/js/order-create.js' %}"></script>
{% endblock script %}